import React, { Component } from 'react';
import {Motion, spring} from 'react-motion';
import './loading.scss';

class Loading extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false
    };
    console.log(props);
  }
  componentDidMount () {
    console.log(this.props)
    this.setState({show: this.props.show})
  }
  componentWillReceiveProps (nextProps) {
    console.log(nextProps);
    if ('show' in nextProps) {
      console.log(nextProps.show);
      this.setState({show: nextProps.show});
    }
  }
  close = () => {
    this.setState({show: false});
  }
  fnRest = (show) => {
    // console.log('动画完成', show);
    if (!show) {
      console.log('结束动画完成')
      this.props.close();
    }
  }
  render() {
    console.log(this.state.show);
    return (
      <Motion style={{opacity: spring(this.state.show ? 1 : 0), scale: spring(this.state.show ? 1 : 0)}} onRest={this.fnRest.bind(this, this.state.show)}>
        {
          ({opacity, scale}) => (
            <div className="loading" style={{opacity}}>
              <div className="box" style={{transform: `scale(${scale})`}}></div>
            </div>
          )
        }
      </Motion>
    );
  }
}
 
export default Loading;